<template>
    <div class="clearfix" id="login_wrap">
        <div id="login">
            <h2 class="title">登录页</h2>
            <!-- <div class="login--account">
                <span>账号：</span>
                <input
                    type="text"
                    placeholder="随便输"
                    name="account"
                    v-model.trim="username"
                />
            </div>
            <div class="login--password">
                <span>密码：</span>
                <input
                    type="password"
                    placeholder="随便输"
                    name="password"
                    v-model.trim="password"
                    @keyup.enter="login"
                />
            </div>
            <p class="login--btn">
                <button id="loginBtn" @click="login">登录</button>
            </p> -->
          
               <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" placeholder="随便输" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" placeholder="随便输" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
                </el-form>
                <p>账号密码随便写  账号 admin 密码随便写  完整菜单  其他账号密码 菜单不完整</p>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data() {
        var validateUsername = (rule, value, callback) => {
                    if (value === '') {
                    callback(new Error('请输入用户名'));
                    } else {
                     if (this.ruleForm.username !== '') {
                        callback();
                     }
                    }
        };
        var validatePassword = (rule, value, callback) => {
                    if (value === '') {
                    callback(new Error('请输入密码'));
                    } else {
                    if (this.ruleForm.password !== '') {
                        callback();
                    }
                    }
        };
        return {
            // username: "",
            // password: "",
            ruleForm: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
             }
        };
    },
    methods:{
        ...mapMutations('login',['setUser']),
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
            if (valid) {  
            //请求接口
            let res = await this.$api.login({
                user:this.ruleForm.username,
                pwd:this.ruleForm.password
                })
                console.log('222',res);
                if(res.data.status ===200){
                      if(this.ruleForm.username === 'admin'){
                          console.log('admin----------------------')
                          //1. 存储登录信息
                          //this.$store.commit('login/setUser',{username:this.ruleForm.username,token:'admin'}) 
                          //2. 跳转页面
                          this.setUser({username:this.ruleForm.username,token:'admin'})
                      }else{
                          //1. 存储登录信息 
                          console.log('vip----------------------')
                          //this.$store.commit('login/setUser',{username:this.ruleForm.username,token:'vip'})
                          //2. 跳转页面
                          this.setUser({username:this.ruleForm.username,token:res.data.token})
                      }
                      this.$router.push('/')
                }
                //1. 存储登录信息 
                //   this.$store.commit('loginModule/setUser',res.data.token)
                //2. 跳转页面
                //   this.$router.push('/')
                //   //3. 数据持久化
                //   localStorage.setItem('usertoken',res.data.token)
            } else {
                console.log('error submit!!');
                return false;
            }
         });
      },
    //  async login(){
    //     //请求接口
    //    let res = await this.$api.login({
    //       user:this.username,
    //       pwd:this.password
    //     })
    //     console.log('222',res);
        
    //     //1. 存储登录信息 
    //     //   this.$store.commit('loginModule/setUser',res.data.token)
    //     //2. 跳转页面
    //     //   this.$router.push('/')
    //     //   //3. 数据持久化
    //     //   localStorage.setItem('usertoken',res.data.token)
    //   }
    }
};
</script>
<style scoped lang="less">
.title {
    text-align: center;
    font-size: 22px;
    margin-top:0;
}
#login_wrap {
    position: relative;
    background: rgba(64, 64, 194, 0.1);
    height: 100%;
    > div {
        background: #fff;
        width: 479px;
        //height: 325px;
        padding: 30px 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        > div {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            &.login--account {
                margin: 25px 0 30px;
            }
            span {
                color: #666;
                display: inline-block;
                width: 84px;
                font-size: 20px;
            }
            input {
                background: none;
                font-size: 16px;
                border: none;
                height: 30px;
                width: 280px;
                padding-left: 12px;
                box-sizing: border-box;
                color: #666;
                &.error {
                    border: 1px solid #f00;
                }
                &::-webkit-input-placeholder {
                    color: #aaa;
                }
            }
        }

        p {
            text-align: right;
            &.login--btn {
                button {
                    width: 100%;
                    height: 50px;
                    font-size: 18px;
                    background: #0f6171;
                    border: none;
                    margin-top: 30px;
                    color: #fff;
                    border-radius: 6px;
                    cursor: pointer;
                }
            }
            a {
                color: #fff;
                display: inline-block;
                padding: 0 15px;
                font-size: 14px;
            }
        }
    }
}
</style>
